<!--
 * @Author: daidai
 * @Date: 2022-02-20 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <div v-if="pageflag" class="chart-container">
    <div class="box">
      <div class="box-info">
        <div class="desc">车辆数量</div>
        <div class="light animat">7036辆</div>
      </div>
      <div class="box-info box2">
        <div class="desc">物流企业数量</div>
        <div class="light animat">1851家</div>
      </div>
      <div class="box-info box3">
        <div class="desc">物流园区数量</div>
        <div class="light animat">21个</div>
      </div>
      <div class="box-info box4">
        <div class="desc">线路数量</div>
        <div class="light animat">3000条</div>
      </div>
      <div class="box-info box5">
        <div class="desc">司机数量</div>
        <div class="light animat">17万人</div>
      </div>
    </div>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import { currentPOST } from 'api/modules';

export default {
  data() {
    return {
      pageflag: true,
      timer: null,
    };
  },
  created() {
    this.getData();
  },
  mounted() { },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;

      this.$nextTick(() => {
        this.init();
      });
      // this.switper();
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
      );
      let myChart = this.$refs.charts.chart;
      myChart.on('mouseover', (params) => {
        this.clearData();
      });
      myChart.on('mouseout', (params) => {
        this.timer = setInterval(
          looper,
          2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
        );
      });
    },
    init() { },
  },
};
</script>
<style lang="scss" scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: 100%;

  .box {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 70px;
    z-index: 0;

    .box-info {
      position: absolute;
      top: -10px;
      // border: 1px solid red;
      // margin: 10px;
      width: 170px;
      height: 180px;

      // line-height: 38px;
      text-align: center;

      // padding: 10px 10px 45px 10px;

      background: url('../../assets/img/launch/home/lcc_bg1.png') no-repeat center;
      background-position: -10px -50px;
      background-size: 100% 100%;
      // animation: zoomCenter 4s ease-in-out infinite;

      .desc {
        margin-top: 50px;
        margin-left: 5px;
        color: #97c7ff;
        font-size: 14px;
        font-weight: 500;
      }

      .light {
        margin-top: 10px;
        margin-bottom: 12px;
        // padding-left: 10px;
        color: #d8e7ff;
        font-size: 18px;
        // font-weight: 600;
        // font-family: 'YouSheBiaoTiHei';
      }
    }

    .box2 {
      width: 200px;
      height: 210px;
      top: 0px;
      left: 113px;
      background-image: url('../../assets/img/launch/home/lcc_bg3.png');
      animation-delay: 1s;

      .desc {
        margin-top: 65px;
        margin-left: 15px;
        font-size: 16px;
      }

      .light {
        margin-top: 10px;
        margin-left: 15px;
        font-size: 22px;
        font-weight: bold;
      }
    }

    .box3 {
      left: 270px;
      background-image: url('../../assets/img/launch/home/lcc_bg4.png');
      animation-delay: 2s;
    }

    .box4 {
      top: 105px;
      left: 30px;
      background-image: url('../../assets/img/launch/home/lcc_bg2.png');
      animation-delay: 3s;
    }

    .box5 {
      height: 170px;
      top: 100px;
      left: 240px;
      background-image: url('../../assets/img/launch/home/lcc_bg5.png');
      animation-delay: 4s;
    }
  }
}

@keyframes zoomCenter {
  0% {
    transform: scale(1);
    filter: brightness(0.9);
  }

  50% {
    transform: scale(1.04);
    filter: brightness(1);
  }

  100% {
    transform: scale(1);
    filter: brightness(0.9);
  }
}
</style>
